<template>
  <!-- 我的任务 -->
  <view class="conter">
    <cc-goback title='我的任务' color="#fff"></cc-goback>
      <view class="navigation_head"></view>
    <view class="head">
      <view class="head_a" @click="show_a">
        待回执
        <view class="head_border_a" v-show="flag">
        </view>
      </view>
      <view class="head_b" @click="show_b">
        已完成
        <view class="head_border_b" v-show="!flag">
        </view>
      </view>
    </view>
    <!-- 待回执 -->
    <view class="wait_for" v-show="flag">
      <view class="box">
        <view class="box_a">
         <view class="head_word">
           <ms-dropdown-menu>
             <ms-dropdown-item @input="mileage" v-model="value" :list="All_enterpriseList"></ms-dropdown-item>
           </ms-dropdown-menu>
         </view>
        </view>
        <view class="box_a">
         <view class="head_left">
         <uni-datetime-picker type="date" :value="date" start="2020-6-15" end="2025-6-15" @change="dateChange"></uni-datetime-picker>
         </view>
        </view>
        <view class="box_a">
         <view class="head_word">
           <ms-dropdown-menu>
             <ms-dropdown-item @input="mileage_a" v-model="value_a" :list="sortlist"></ms-dropdown-item>
           </ms-dropdown-menu>
         </view>
        </view>
      </view>
      <!-- 卡片区域 -->
      <view class="card_content" v-for="item in 3">
        <view class="card_a">
          <view class="word_a">
            <view class="word_aa">
              运维任务
            </view>
            <view class="word_ab">
              2020.05.01 15:00
            </view>
          </view>
          <view class="word_b">
            大兴区域出现污染异常，请相关企业进行排查<br>详情见附件内容
          </view>
          <view class="word_c">
            <image src="../../static/slices/tishi.png" mode=""></image>
            2020.05.06 15:00 前完成
          </view>
          <view class="word_d">
            <button type="primary" plain="true">查看详情</button>
            <button type="primary">去执行</button>
          </view>
        </view>
      </view>
    </view>
    <!-- 已完成 -->
    <view class="completed" v-show="!flag">
      <view class="box">
        <view class="box_aa">
          类型
          <image src="../../static/organization_ranking/xl.png" mode=""></image>
        </view>
        <view class="box_aa">
          时间
          <image src="../../static/organization_ranking/xl.png" mode=""></image>
        </view>
        <view class="box_aa">
          状态
          <image src="../../static/organization_ranking/xl.png" mode=""></image>
        </view>
        <view class="box_bb">
          排序
          <image src="../../static/slices/paxin.png" mode=""></image>
        </view>
      </view>
      <!-- 卡片区域 -->
      <uni-card v-for="item in 3">
        <view class="card_a">
          <view class="word_a">
            <view class="word_aac">
              <view class="word_ac">
                通过
              </view> 
              运维任务
            </view>
            <view class="word_ab">
              2020.05.01 15:00
            </view>
          </view>
          <view class="word_b">
            大兴区域出现污染异常，请相关企业进行排查<br>详情见附件内容
          </view>
          <view class="word_c">
            <image src="../../static/slices/tishi.png" mode=""></image>
            2020.05.06 15:00 前完成
          </view>
          <view class="word_dd">
            <button type="primary" plain="true">查看详情</button>
          </view>
        </view>
      </uni-card>
    </view>
  </view>
</template>

<script>
  import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
  import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
  export default {
    components: {
      msDropdownMenu,
      msDropdownItem
    },
    data() {
      return {
        value: 0,
        value_a:1,
        date:'',
        allTime:'',
        All_enterpriseList: [],
        enterprise_id: '',
        limit:5,
        page:1,
        flag:true,
        sortlist:[
          { text: '升序',
            value_a: 0},
          { text: '降序',
            value_a: 1}
        ]
      };
    },
    onLoad() {
      this.getTask_type()
    },
    methods:{
      // 任务类型列表
      getTask_type(){
        this.$http.get('/envirnment-basic/app/task/typeList',{}).then(res=>{
          // console.log('res',res)
          if (res.code == '00000') {
            // console.log('设备状态数量统计', res.data)
            const list = []
            res.data.forEach((item, index) => {
              list.push({
                text: item.name,
                id: item.id,
                value: index + 1
              })
            })
            list.unshift({
              text: '类型',
              value: 0
            })
            this.All_enterpriseList = list
          }
        })
      },
      dateChange(e){
       this.allTime = e
       // console.log('0000',this.startTime)
      },
      mileage(e) {
        this.enterprise_id = e.id
        // console.log('enterprise_id',this.enterprise_id);
      }, 
      mileage_a(e) {
        console.log('e',e);
      },
        show_a(){
          this.flag=!this.flag
        },
        show_b(){
          this.flag=!this.flag
        }
      }
    }
</script>

<style lang="scss">
  .conter {
    // height: 1000rpx;
    background-color: #F7F7F7;
    overflow: hidden;
  }
   .navigation_head{
     height: calc(88rpx + var(--status-bar-height));
   }
  .head {
    display: flex;
    height: 88rpx;
    background: #FFFFFF;
    border: 1px solid #F2F2F2;
  }

  .head_a {
    width: 50%;
    margin: auto;
    text-align: center;
  }

  .head_b {
    width: 50%;
    margin: auto;
    text-align: center;
  }

  .head_border_a {
    width: 60rpx;
    height: 4rpx;
    margin: auto;
    background: #4EA1FF;
    border-radius: 2rpx;
  }
  .head_border_b {
    width: 60rpx;
    height: 4rpx;
    margin: auto;
    background: #4EA1FF;
    border-radius: 2rpx;
  }

  .box {
    width: 702rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .box_a {
   width: 212rpx;
   height: 80rpx;
   margin: 20rpx 0 0 0;
   overflow: hidden;
   border-radius: 8rpx;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #fff;
   border: 1rpx solid #ccc;
  }
  .head_left{
    width: 100%;
  }
  .box_aa {
    width: 160rpx;
    height: 66rpx;
    margin: 20rpx 0 0 24rpx;
    line-height: 66rpx;
    padding-left: 21rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    background: #FFFFFF;
    border-radius: 8rpx;
    border: 1px solid #EAEAEA;
    background-color: #fff;
    image {
      float: right;
      width: 22rpx;
      height: 12rpx;
      margin: 30rpx 24rpx 0 0;
    }
  }

  .box_b {
    width: 212rpx;
    height: 80rpx;
    margin: 20rpx 0 0 0;
    line-height: 88rpx;
    // padding-left: 21rpx;
    text-align: center;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    background: #FFFFFF;
    border-radius: 8rpx;
     border: 1px solid #EAEAEA;
    background-color: #fff;
    image {
      float: right;
      width: 17rpx;
      height: 20rpx;
      margin: 35rpx 24rpx 0 0;
    }
  }
  .box_bb {
    width: 160rpx;
    height: 66rpx;
    margin: 20rpx 24rpx 0 24rpx;
    line-height: 66rpx;
    padding-left: 21rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    background: #FFFFFF;
    border-radius: 8rpx;
    border: 1px solid #EAEAEA;
    background-color: #fff;

    image {
      float: right;
      width: 17rpx;
      height: 20rpx;
      margin: 25rpx 24rpx 0 0;
    }
  }
  .card_content{
    width: 662rpx;
    margin: 20rpx auto 0;
    background-color: #FFFFFF;
    border-radius: 8rpx;
    padding: 20rpx;
  }
  .card_a {
    height: 360rpx;
  }

  .word_a {
    display: flex;
    justify-content: space-between;
  }

  .word_aa {
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .word_aac {
    display: flex;
    align-items: center;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .word_ab {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
  }
  .word_ac{
    width: 76rpx;
    height: 36rpx;
    line-height: 36rpx;
    text-align: center;
    margin-right: 10rpx;
    font-size: 22rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #4EA1FF;
    background: #E7F1FF;
    border-radius: 18rpx;
    border: 1rpx solid #4EA1FF;
  }
  .word_b {
    margin-top: 19rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }

  .word_c {
    margin-top: 22rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FF3B30;
    line-height: 33px;

    image {
      margin-right: 10rpx;
      width: 20rpx;
      height: 20rpx;
    }
  }

  .word_d {
    display: flex;
    margin-top: 30rpx;

    button {
      width: 45%;
    }
  } 
  .word_dd {
    margin-top: 30rpx;
  }

 
</style>
